<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ocean by Joshua D. Peterson</title>
<link rel="stylesheet" type="text/css" href="ocean.css" />
</head>
<body>
<div class="t-cont t-measure t-font t-link">
  <div class="t-measure ql-div">
    <div class="t-measure ql-div-link">
      <!-- Quick Links -->
      <a href="index.html">Sitemap</a>|
	  <a href="index.html">frequently asked questions</a>|
	  <a href="index.html">HELP</a>
	  </div>
  </div>
  <div class="t-measure logo-div">
    <!-- Logo -->
    <h1 class="logo-header">Your Logo Here (Height: 100px)</h1>
  </div>
  <div class="t-measure nav-div t-link nav-link">
  	<!-- Navigation -->
	
	<!-- This can be especially difficult if you do not understand
	     exactly what is going on here. -->
  	<a href="index.html">Blog</a>|
 	<a href="index.html">News</a>|
 	<a href="index.html">Products</a>|
	<!-- The links above are typical links for the navigation. You
	     do not have to apply any special class, or include any
		 special tags within the link to make it look right. For the
		 "current page" effect - or whatever you call it - you do
		 have to do something different.
		 
		 With the tag below (entitled "Template Information" as an
		 example), you will need to do two things:
		 
		 1. Assign the link the class name "nav-selected"
		 2. Enclose the link's text in a <p> (paragraph) tag.
    -->
	<a href="index.html" class="nav-selected"><b>Template Information</b></a>|	
	<a href="index.html">Services</a>|
	<a href="index.html">Contact Us</a>
  </div>
  <div class="t-measure t-sep nav-sep-div t-link nav-sep-link t-font">
  <!-- Navigation Separator / Sub-Navigation
       
	   Turn this into a sub-navigation if you want to!
       The code is set to use a similar link system.
  -->
  </div>
  <div class="t-measure ad-div">
  <!-- Advertisements / Welcome Photo
  	   
	   Just change the image or add two.
       The margins between the edges and the image should be 4 pixels.
	   
	   Compensate for the difference if you add a border. (i.e. 2px border = 2px margins)
	   
	   So if you do 2 photos, make sure they have a 4px margin between them.
  -->
  <img src="img/adscene.jpg" alt="A photograph of a field and the sky" />
  </div>
  <div class="t-sep"></div>
  <!-- Content
  
       The following tag is very important, so do not play around with it!
	   
	   You have 3 options available to you for the layout:
	   25 / 75 = 200px for the left column, 600px for the right column.
	   50 / 50 = 400px for each column.
	   75 / 25 = 600px for the left column, 200px for the right column.
	   
	   To change the layout style, change the class name to:
	   25 / 75 = "content-25"
	   50 / 50 = "content-50"
	   75 / 25 = "content-75"
	   
	   IMPORTANT:
	   If you use the 75/25 layout, switch "con-style" with "nav-style" and vice-versa.
	   If you would prefer to, you can switch the "con-style" with "nav-style" and vice-versa.
  -->
  <div id="gpc-content" class="content-50">
   <div class="c-contain">
	   <div class="t-font t-link c-left-col nav-style">
   	   <!-- Start Left Column Content -->
	   <h1>Sections</h1>
       <a href="index.html">Template Information</a><br />
	   <a href="index.html">25, 50, &amp; 75 Layout Views</a><br />
	   <a href="index.html">Author Information</a>
	   <div class="hr"></div>
	   <h2>Sub Header</h2>
   	   <p>Paragraph Text</p>
	   <h1>Lorem Ipsum</h1>
<div class="bquote">Quotes look beautiful here, too.</div>
	   <p>Cras vulputate. Suspendisse ut ligula. Aliquam dignissim tristique diam. Aliquam dictum. Nam nec purus. Integer nec libero. Proin a est. Ut sagittis velit et dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam viverra risus non lectus vulputate fermentum. Vestibulum nonummy, pede in consectetuer malesuada, sapien mi porttitor tellus, ut rutrum neque pede a sapien. Fusce vehicula. Quisque et arcu. Pellentesque aliquet, justo sed volutpat placerat, arcu mauris posuere libero, condimentum laoreet elit nisi sit amet erat. Nunc venenatis.</p>
       <!-- End Left Column Content -->
	   </div>
   	   <div class="t-font t-link c-right-col con-style">
	   <!-- Start Right Column Content -->
	   <div class="bquote">
	   <b>Lucky</b> is one of two designs inspired, and centered around the photo displayed above.
   	   </div>
	   <h1>Layout Styles</h1><div class="hr"></div>
	   <p>Below are links that will update this page to show the different layout styles available with this design. I hope you can do a lot with these.</p>
	   <ul>
	   <li><a href="index.html">Change Class to 25 / 75</a></li>
	   <li><a href="layout50.html">Change Class to 50 / 50</a></li>
	   <li><a href="layout75.html">Change Class to 75 / 25</a></li>
	   <li><a href="template.html">Blank Page</a></li>
	   </ul>
<br />
	   <h1>Template Information</h1><div class="hr"></div>
	   <h2>Background</h2>
	   <p>This template is my first template, and is a design I prize very much because of the basic design quality.</p>
	   <p>You are free to use this template in whatever way you want, as long as you leave the link and credit for the design to me.</p>
	   <h2>Development Help</h2>
	   <p>I've tried my hardest to be as descriptive as I possibly can be with commenting my XHTML and CSS. I know that it might be difficult for some, but you can <a href="mailto:joshuadpeterson@comcast.net?subject=Help!">email me</a> if you need any additional help, or if you would like me to add comments or change something in my future templates.</p>
	   <h2>Get it Customized!</h2>
	   <p>If you are interested in having this template customized, please <a href="mailto:joshuadpeterson@comcast.net?subject=Green Pasture Customize">contact me</a>; I will be customizing templates starting at 120 USD.</p><br />
	   <h1>Author Information</h1><div class="hr"></div>
	   <p>My name is <a href="http://www.auhsoj.info/">Joshua D. Peterson</a>; 20 years old; living in Tucson, Arizona with my family. I'm a self-taught XHTML, CSS, JavaScript, DOM, PHP, SQL, XML guru (my favorite language being PHP; my favorite database being XML). My current hope is to get back up and running as a freelance developer and designer, so any and every bit of help or word-of-mouth would be greatly appreciated!</p>
       <!-- End Right Column Content -->
	   </div>
	   <div class="c-foot"></div>
   </div>
  </div>
  <div class="t-sep"></div>
  <div class="t-measure foot-div">
    <!-- Footer -->
	  <div class="t-font t-link foot-font">
All content is &copy;2007 YourCompanyName. All Rights Reserved.<br /><br />
Design by <a href="http://www.auhsoj.info/">Joshua D. Peterson</a>.
	  </div>
  </div>
  <div class="foot-ref"></div>
</div>
</body>
</html>
